<!-- subpkg_user/verify/index.vue -->
<script setup>
  import { ref } from 'vue'
  import { toast } from '@/utils/utils'

  const realName = ref('')
  const idCard = ref('')

  const onSubmit = async () => {
    // 1. 获取设备信息
    const metaInfo = uni.getFacialRecognitionMetaInfo()
    // 2. 调用云函数
    const res = await uniCloud.callFunction({
      name: 'uni-verify',
      data: {
        realName: realName.value,
        idCard: idCard.value,
        metaInfo,
      },
    })
    console.log('uni-verify云函数的返回值：', res)
    // 3. 客户端调起sdk刷脸认证
    try {
      await uni.startFacialRecognitionVerify({
        certifyId: res.result.certifyId,
      })
      toast('认证成功!')
      // 做认证通过之后的逻辑处理
    } catch (err) {
      toast('认证失败!')
    }
  }
</script>
<template>
  <uni-forms class="verify-form">
    <uni-forms-item name="account">
      <input
        v-model="realName"
        type="text"
        placeholder="请输入姓名"
        class="uni-input-input"
        placeholder-style="color: #818181"
      />
    </uni-forms-item>
    <uni-forms-item name="password">
      <input
        v-model="idCard"
        type="text"
        placeholder="请输入身份证号"
        class="uni-input-input"
        placeholder-style="color: #818181"
      />
    </uni-forms-item>
    <button class="submit-button" @click="onSubmit">认证</button>
  </uni-forms>
</template>

<style lang="scss" scoped>
  .verify-form {
    padding: 120rpx 66rpx 66rpx;
  }

  .uni-forms-item {
    height: 100rpx;
    margin-bottom: 20 !important;
    border-bottom: 2rpx solid #eee;
    box-sizing: border-box;
  }

  ::v-deep .uni-forms-item__content {
    display: flex;
    align-items: center;
  }

  ::v-deep input {
    width: 100%;
    font-size: $uni-font-size-base;
    color: $uni-main-color;
  }

  ::v-deep .uni-forms-item__error {
    width: 100%;
    padding-top: 10rpx;
    border-top: 2rpx solid $uni-primary;
    color: $uni-primary;
    font-size: $uni-font-size-small;
    transition: none;
  }

  .submit-button {
    height: 100rpx;
    line-height: 100rpx;
    /* #ifdef APP */
    padding-top: 4rpx;
    /* #endif */
    margin-top: 80rpx;
    border: none;
    color: #fff;
    background-color: $uni-primary;
    border-radius: 100rpx;
    font-size: $uni-font-size-big;
  }

  button[disabled] {
    background-color: #fadcd9;
    color: #fff;
  }
</style>
